<template>
  <div class="todo-stats">
    <span><el-icon><List /></el-icon> 总数：{{ todos.length }}</span>
    <span><el-icon><CircleCheck /></el-icon> 已完成：{{ completed }}</span>
    <span><el-icon><Clock /></el-icon> 未完成：{{ active }}</span>
    <span class="rate">完成度：{{ rate }}%</span>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { List, CircleCheck, Clock } from '@element-plus/icons-vue'
const props = defineProps({
  todos: Array
})
const completed = computed(() => props.todos.filter(t => t.isCompleted).length)
const active = computed(() => props.todos.length - completed.value)
const rate = computed(() => props.todos.length ? Math.round(completed.value / props.todos.length * 100) : 0)
</script>

<style scoped>
.todo-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 18px;
  font-size: 1rem;
  color: var(--primary);
  margin-top: 8px;
  gap: 10px;
  flex-wrap: wrap;
}
.todo-stats .rate {
  font-weight: bold;
  color: #16c784;
}
</style> 